import Taro, {Component} from "@tarojs/taro";
import {View, Image, Picker } from "@tarojs/components";

import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../store/Stores'

import right from "../assets/img/icon_09.png";

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class PickerArea extends Component<IHomeProps> {
  constructor(props) {
    super(props)
    this.changeArea = this.changeArea.bind(this)
  }

  state = {
    allProvince: [],
    allCity: [],
    allDistract: [],
    provinceIndex: 0,
    cityIndex: 0,
    distractIndex: 0,
    areaPicker: [],
    area: null,
    levelState: 3, // 选项层级[1: 只选省，2：选省市，3：选省市区]
  }

  componentWillMount(): void {
    // console.log(this.props)
    let level = this.props.level
    let area = this.props.areaData || null
    this.getAllProvince()
    this.getAllCity(0)
    this.getAllDistract(0, 0)
    this.setState({
      levelState: level,
      area
    })
  }

  componentDidShow(): void {
    // 组件中该钩子不会执行
  }

  getAllProvince() {
    let {areaStore} = this.props.stores
    areaStore.getAllProvinceFromLocal({
      callBack: res => {
        // console.error(res)
        this.setState({
          allProvince: res
        }, () => {
          this.setAreaPicker()
        })
      }
    })
  }

  getAllCity(index: number = 0) {
    let {areaStore} = this.props.stores
    areaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        //console.log(res)
        this.setState({
          allCity: res
        }, () => {
          this.setAreaPicker()
        })
      }
    })
  }

  getAllDistract(indexProvince: number = 0, indexCity: number = 0) {
    let {areaStore} = this.props.stores
    areaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        //console.log(res)
        this.setState({
          allDistract: res
        }, () => {
          this.setAreaPicker()
        })
      }
    })
  }

  setAreaPicker() {
    let {allProvince, allCity, allDistract, levelState} = this.state
    switch (levelState) {
      case 1: {
        this.setState({
          areaPicker: [allProvince]
        })
        break
      }
      case 2: {
        this.setState({
          areaPicker: [allProvince, allCity]
        })
        break
      }
      default: {
        this.setState({
          areaPicker: [allProvince, allCity, allDistract]
        })
        break
      }
    }
  }

  changeArea = () => {
    let {allProvince, allCity, allDistract, provinceIndex, cityIndex, distractIndex, levelState} = this.state
    let res = {}
    let area: any = null
    switch (levelState) {
      case 1: {
        res.province = {
          value: allProvince[provinceIndex]['value'],
          label: allProvince[provinceIndex]['label']
        }
        area = allProvince[provinceIndex]['label']
        break
      }
      case 2: {
        res.province = {
          value: allProvince[provinceIndex]['value'],
          label: allProvince[provinceIndex]['label']
        }
        res.city = {
          value: allCity[cityIndex]['value'],
          label: allCity[cityIndex]['label']
        }
        area = allProvince[provinceIndex]['label'] + allCity[cityIndex]['label']
        break
      }
      default: {
        res.province = {
          value: allProvince[provinceIndex]['value'],
          label: allProvince[provinceIndex]['label']
        }
        res.city = {
          value: allCity[cityIndex]['value'],
          label: allCity[cityIndex]['label']
        }
        res.distract = {
          value: allDistract[distractIndex]['value'],
          label: allDistract[distractIndex]['label']
        }
        area = allProvince[provinceIndex]['label'] + allCity[cityIndex]['label'] + allDistract[distractIndex]['label']
        break
      }
    }
    this.setState({
      area
    })
    // taro属性传递的方法需要以on开头
    this.props.onPicketArea(res)

    // 初始化选项数据
    this.getAllProvince()
    this.getAllCity(0)
    this.getAllDistract(0, 0)
  }

  cancelArea() {
    // 初始化选项数据
    this.getAllProvince()
    this.getAllCity(0)
    this.getAllDistract(0, 0)
  }

  onColumnChange(e) {
    // console.log(e.detail)
    let {column, value} = e.detail
    if (column === 0) { // 选择省
      this.getAllCity(value)
      this.getAllDistract(value, 0)
      this.setState({
        provinceIndex: value
      })
    }
    if (column === 1) {
      this.getAllDistract(this.state.provinceIndex, value)
      this.setState({
        cityIndex: value
      })
    }
    if (column === 2) {
      this.setState({
        distractIndex: value
      })
    }
  }

  render() {
    let {areaPicker, area} = this.state
    return (
      <Picker className='input-picker' name='receiverAddress' mode='multiSelector'
              range={areaPicker} rangeKey='label'
              onChange={this.changeArea}
              onCancel={this.cancelArea.bind(this)}
              onColumnChange={this.onColumnChange.bind(this)}
      >
        <View className='tt'>
          {!area && <View className='from-input picker-con placeholder-class'>请选择</View>}
          {area && <View className='from-input picker-con'>{area}</View>}
          <Image className='drop-down-icon' src={right} />
        </View>
      </Picker>
    )
  }
}

export default PickerArea
